<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">项目甘特图</h2>
      <div class="flex items-center space-x-4">
        <label class="flex items-center text-sm text-gray-600 dark:text-gray-400">
          <input
            type="checkbox"
            checked={{this.hideWeekends}}
            {{on "change" this.toggleWeekends}}
            class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
          />
          隐藏周末
        </label>
        <label class="flex items-center text-sm text-gray-600 dark:text-gray-400">
          <input
            type="checkbox"
            checked={{this.hideHiddenDates}}
            {{on "change" this.toggleHiddenDates}}
            class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
          />
          隐藏配置日期
        </label>
      </div>
    </div>

    {{! 时间筛选区域 }}
    <div class="mb-6 grid grid-cols-1 md:grid-cols-5 gap-4">
      {{! 开始时间筛选 }}
      <div class="pt-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">开始时间</label>
        <input
          type="date"
          value={{this.queryStartTime}}
          {{on "input" this.updateQueryStartTime}}
          class="block mt-2 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
        />
      </div>
      
      {{! 结束时间筛选 }}
      <div class="pt-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">结束时间</label>
        <input
          type="date"
          value={{this.queryEndTime}}
          {{on "input" this.updateQueryEndTime}}
          class="block mt-2 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
        />
      </div>
      
      {{! 操作按钮区域 }}
      <div class="flex items-end space-x-2">
        <button
          type="button"
          {{on "click" this.clearFilters}}
          class="px-4 py-2.5 text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
        >
          重置筛选
        </button>
      </div>
    </div>

    {{#if this.isLoading}}
      <div class="flex items-center justify-center py-8">
        <div class="flex items-center text-blue-600 dark:text-blue-400">
          <T::Icon @icon="loading" class="mr-2 animate-spin" />
          加载中...
        </div>
      </div>
    {{else if this.groupedParticipants.length}}
      <div class="overflow-x-auto">
        <table class="min-w-full border-collapse">
          <thead>
            <tr class="bg-gray-50 dark:bg-gray-700">
              <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
                人员
              </th>
              {{#each this.visibleDates as |date|}}
                <th class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300 border-b border-gray-200 dark:border-gray-600 min-w-12">
                  {{this.formatDate date}}
                </th>
              {{/each}}
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            {{#each this.groupedParticipants as |group|}}
              <tr>
                <td class="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600">
                  {{group.memberName}}
                </td>
                {{#each this.visibleDates as |date|}}
                  <td class="px-0 py-1 text-center border-b border-gray-200 dark:border-gray-600 min-w-12">
                    {{#if group.memberId}}
                      {{#let (this.getRequirementsForDate group.memberId date) as |requirements|}}
                        {{#if requirements.length}}
                          <div class="flex flex-col gap-0.5">
                            {{#each requirements as |requirement|}}
                              {{#if requirement}}
                                <div
                                  class="w-full h-4 {{this.getRequirementColor requirement.id}} {{if (this.isFirstDayOfRequirement group.memberId date requirement.id) 'rounded-l' ''}} {{if (this.isLastDayOfRequirement group.memberId date requirement.id) 'rounded-r' ''}}"
                                  title="{{requirement.name}}"
                                >
                                  {{#if (this.shouldShowRequirementName group.memberId date requirement.id)}}
                                    <div class="h-full flex items-center justify-center text-white text-xs font-medium px-1 truncate">
                                      {{this.getRequirementAbbr requirement.name}}
                                    </div>
                                  {{/if}}
                                </div>
                              {{else}}
                                {{!-- 预占位，显示透明占位符 --}}
                                <div class="w-full h-4 opacity-0"></div>
                              {{/if}}
                            {{/each}}
                          </div>
                        {{else if (this.isWeekend date)}}
                          <div class="w-full h-4 bg-gray-200 dark:bg-gray-600"></div>
                        {{else}}
                          <div class="w-full h-4 bg-gray-100 dark:bg-gray-700"></div>
                        {{/if}}
                      {{/let}}
                    {{else}}
                      <div class="w-full h-4 bg-gray-100 dark:bg-gray-700"></div>
                    {{/if}}
                  </td>
                {{/each}}
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
    {{else}}
      <div class="flex items-center justify-center py-12">
        <div class="text-center">
          <div class="text-gray-400 dark:text-gray-500 mb-2">
            <T::Icon @icon="chart" class="w-12 h-12 mx-auto" />
          </div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">
            {{#if (eq this.groupedParticipants.length 0)}}
              暂无参与人员数据
            {{else}}
              暂无时间范围内的任务数据
            {{/if}}
          </p>
          <button
            type="button"
            {{on "click" this.clearFilters}}
            class="mt-4 px-4 py-2 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
          >
            重置筛选条件
          </button>
        </div>
      </div>
    {{/if}}

  </div>
</div>